document.addEventListener('DOMContentLoaded', function () {
    const registerButton = document.querySelector('.register');
    const emailInput = document.querySelector('input[type="email"]');
    const passwordInput = document.querySelector('input[type="password"]');
    const agreementCheckbox = document.getElementById('agreement');
    const agreement = document.getElementsByClassName('agreement')[0];

    // 为邮箱和密码输入框创建错误信息容器
    const emailError = document.createElement('div');
    const passwordError = document.createElement('div');
    const agreementError = document.createElement('div');

    // 设置错误信息容器的样式
    emailError.className = 'error-message';
    passwordError.className = 'error-message';
    agreementError.className = 'error-message';

    // 将错误信息容器添加到对应的输入框下方
    emailInput.parentNode.insertBefore(emailError, emailInput.nextSibling);
    passwordInput.parentNode.insertBefore(passwordError, passwordInput.nextSibling);
    agreement.parentNode.insertBefore(agreementError, agreement.nextSibling);

    registerButton.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 清空之前的错误信息
        emailError.textContent = '';
        passwordError.textContent = '';
        agreementError.textContent = '';

        let isFormValid = true;

        // 检查邮箱是否已填写
        if (!emailInput.value.trim()) {
            emailError.textContent = '邮箱账号未填写。';
            isFormValid = false;
        }

        // 检查密码是否已填写
        if (!passwordInput.value.trim()) {
            passwordError.textContent = '密码未填写。';
            isFormValid = false;
        }

        // 如果邮箱和密码都已填写，再检查复选框
        if (isFormValid && !agreementCheckbox.checked) {
            agreementError.textContent = '请勾选同意用户协议、隐私政策和产品服务协议。';
            isFormValid = false;
        }

        if (!isFormValid) {
            // 如果表单无效，可以在这里添加其他逻辑，如聚焦到第一个错误的输入框
            if (emailInput.value.trim() === '' || passwordInput.value.trim() === '') {
                if (emailInput.value.trim() === '') {
                    emailInput.focus();
                } else {
                    passwordInput.focus();
                }
            }
        } else {
            // 如果表单有效，发送注册请求到服务器
            fetch('http://localhost:9090/user/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `email=${encodeURIComponent(emailInput.value)}&password=${encodeURIComponent(passwordInput.value)}`
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('注册失败');
                    }
                    return response.json(); // 或者根据后端返回的数据格式进行调整
                })
                .then(data => {
                    console.log('注册成功', data);
                    // 注册成功后的逻辑，例如跳转到登录页面或显示成功消息
                    window.location.href = 'login.html'; // 假设注册成功后跳转到登录页面
                })
                .catch(error => {
                    console.error('注册过程中出现错误:', error);
                    // 这里可以添加错误处理逻辑，例如显示错误信息
                });
        }
    });
});